﻿<!DOCTYPE html>
<html>
<head>
    <title>仪表盘浏览</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_533449_naak7odp5x.css">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css?v=1">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link href="/ViewV5/JS/element/index.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/FORMBI.css?v=8">
    <style>
        .tools .el-card {
            margin: 5px 5px;
            border-radius: 0px;
        }

        .tools .el-card__body {
            padding: 10px 0;
            text-align: left;
            padding-left: 5px;
        }

        .bbsx .el-form-item {
            max-height: 75PX;
        }

        .widthmax {
            width: 100%
        }

        .boxshadow {
            -webkit-box-shadow: 0 1px 3px #ccc;
            -moz-box-shadow: 0 1px 3px #ccc;
            -o-box-shadow: 0 1px 3px #ccc;
            -ms-box-shadow: 0 1px 3px #ccc;
            box-shadow: 0 1px 3px #ccc;
        }
    </style>
</head>
<body style="background-color: #e7ecf1; font-size:12px">

    <div id="Loading">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="DATABI_YBZZ" class="FormV" style="display:none">

        <nav class="navbar navbar-inverse box-shadow" style="border-radius: 0; background-color: #fff; border-color: #fff; " v-if="vtype=='0'">
            <div class="head-center clearfix c2">
                <div class="logo c666 pull-left" v-text="FormName">
                </div>

            </div>
        </nav>
        <div class="container containerb" v-bind:class="{ widthmax: vtype=='1'}" style="padding:0">
            <div class="menu-general ft16 box-shadow hidden">
                <ul>
                    <li v-text="FormName" class="active">仪表盘设计</li>

                </ul>
            </div>
            <div class="main-content ft16   padding10 c666  clearfix" v-bind:class="{ boxshadow:vtype=='0'}">
                <div v-show="tab1=='0'">
                    <el-row id="conwig">
                        <el-form ref="form" label-position="top" :model="FormData">
                            <component class="widget" v-for="(item, index) in FormData.wigetitems" :key="item.wigdetcode" :index="index" :is="item.component" :id="item.wigdetcode" :pzoption="item" style="margin-top:10px" @data-change="datachange"></component>
                        </el-form>
                    </el-row>
                </div>
                <div v-show="tab1=='1'" class="bbsx">

                </div>

            </div>


        </div>



    </div>
    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/httpVueLoader.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>
    <script src="/ViewV5/JS/Echart/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    <!-- 引入组件库 -->
    <!--<script src="/ViewV5/JS/element/element.js"></script>-->
    <script src="/ViewV5/JS/element/element.js"></script>
    <script src="/ViewV5/JS/bijs.js?v=4"></script>
    <script src="data-set.js"></script>


    <script>
        var app = new Vue({
            el: '#DATABI_YBZZ',
            components: {
                'qjDate': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Date.vue'),
                'qjMonth': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Month.vue'),
                'qjInput': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Input.vue'),
                'qjBtn': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Btn.vue'),
                'qjSelect': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Select.vue'),
                'qjTable': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Table.vue'),
                'qjTab': httpVueLoader('/ViewV5/AppPage/DATABI/vue/qjTab.vue'),
                'qjKBan': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_KB.vue'),
                'qjChart': httpVueLoader('/ViewV5/AppPage/DATABI/vue/Yb_Chart.vue')
            },
            data: {
                vtype: ComFunJS.getQueryString('vtype', '0'),
                yl: ComFunJS.getQueryString('yl', 'N'),
                loading: true,
                fmdata: "",
                tab1: "0",
                dataid: "0",
                isview: true,//是否浏览模式,判断需不需要加载默认值
                dataset: [],//数据集
                widgetname: { "qjInput": "输入框", "qjSelect": "单选", "qjMSelect": "多选", "qjDate": "日期时间组件", "qjSelbranch": "部门选择" },
                FormName: "",
                tabtype: "0",
                formop: { width: "0", addurl: "/ViewV5/AppPage/FORMBI/FormAdd.html?pdid=" + ComFunJS.getQueryString('ID'), mangeurl: "/ViewV5/AppPage/FORMBI/FormManage.html?piid=?", listurl: "/ViewV5/AppPage/FORMBI/FormTJ.html?pdid=" + ComFunJS.getQueryString('ID') },
                FiledSetVisible: false,
                tabname: "",
                FormData: {
                    wigetitems: []
                },
                nowwidget: {
                },
                readySize: 0

            },
            created() {
                document.body.removeChild(document.getElementById('Loading'))
                var divBJ = document.getElementById('DATABI_YBZZ');
                divBJ.style.display = "block";
                this.dataid = ComFunJS.getQueryString("id", "0");

            },
            methods: {
                seltab: function (tabtype) {
                    this.tabtype = tabtype;
                },
                addchildwig() {
                    this.readySize++
                    // 检查进度是否设置的colSize一致
                    if (this.readySize == this.FormData.wigetitems.length) {
                        app.GetYBData();
                        //  这时候所有的子组件已加载完成
                        this.layout();

                    }
                },
                clearwigdata: function () {
                    app.FormData.wigetitems.forEach(function (wig) {
                        wig.dataset = [];
                    })
                },
                layout: function () {
                    app.FormData.wigetitems.forEach(function (wig) {
                        if (wig.component == "qjTab") {
                            wig.childpro.Tabs.forEach((tab, index) => {
                                tab.content.forEach((tabitem, indexitem) => {
                                    $("#" + wig.wigdetcode).find(".el-tab-pane").eq(index).append($("#" + tabitem.wigdetcode));
                                })
                            })
                        }
                    })
                },
                jxsql: function (val, isapi) {
                    //可以通过在Url传递参数来添加查询条件
                    var valsql = "";
                    if (val) {
                        valsql = val;
                        var regex2 = /\[(.+?)\]/g;
                        var temp = val.match(regex2);
                        _.forEach(temp, function (obj) {
                            obj = _.trim(obj, '[');
                            obj = _.trim(obj, ']');
                            if (_.startsWith(obj, 'Q.')) {
                                var tempqval = ComFunJS.getQueryString(obj.split('.')[1]);
                                if (!isapi) {
                                    tempqval = "'" + tempqval + "'";
                                }
                                valsql = _.replace(valsql, '[' + obj + ']', tempqval);
                            }
                        })
                    }
                    return valsql;
                },//jie
                jxfiled: function (nowwidget, jxdata) {
                    var js = JSON.parse(jxdata || nowwidget.staticdata);
                    nowwidget.tabfiledlist = [];
                    _.forEach(_.keys(js[0]), function (value) {
                        var fid = {
                            ColumnName: value,
                            ColumnType: "Str",
                            Dimension: "1",
                            Name: value,
                        }
                        if (_.findIndex(nowwidget.tabfiledlist, function (o) { return o.ColumnName == fid.ColumnName; }) == -1) {
                            nowwidget.tabfiledlist.push(fid);
                        }
                    });
                },//解析数据维度
                inityb: function () {


                    $.getJSON('/api/Bll/ExeAction?Action=DATABI_GETYBBYID', { P1: app.dataid }, function (resultData) {
                        if (resultData.ErrorMsg == "") {
                            app.FormName = resultData.Result.Name;
                            if (app.yl == "Y") {
                                app.FormData.wigetitems = JSON.parse(resultData.Result.YBContent);

                            } else {
                                app.FormData.wigetitems = JSON.parse(resultData.Result.YBOption);
                            }
                            app.$notify({
                                title: '成功',
                                message: '页面加载成功',
                                type: 'success'
                            });
                            app.loading = false;
                        }
                    })

                },
                addwd: function (ColumnName, widget) {
                    if (_.findIndex(widget.filist, function (o) { return o.colid == ColumnName }) == -1 && _.findIndex(widget.wdlist, function (o) { return o.colid == ColumnName }) == -1 && _.findIndex(widget.dllist, function (o) { return o.colid == ColumnName }) == -1) {
                        var temp = _.find(widget.tabfiledlist, { 'ColumnName': ColumnName });
                        var wd = { "colid": temp.ColumnName, "colname": temp.Name, "coltype": temp.ColumnType, "width": "", "ishj": false, "caltype": "sum", "istip": true, "isuser": "Y", "order": "", "bindwig": "", options: [], querydata: [], mapdata: [] };
                        widget.wdlist.push(wd)

                    } else {
                        app.$notify({
                            title: '警告',
                            message: '已存在该字段',
                            type: 'warning'
                        });
                    }
                },
                adddl: function (ColumnName, widget) {
                    if (_.findIndex(widget.filist, function (o) { return o.colid == ColumnName }) == -1 && _.findIndex(widget.wdlist, function (o) { return o.colid == ColumnName }) == -1 && _.findIndex(widget.dllist, function (o) { return o.colid == ColumnName }) == -1) {
                        var temp = _.find(widget.tabfiledlist, { 'ColumnName': ColumnName });
                        var wd = { "colid": temp.ColumnName, "colname": temp.Name, "coltype": temp.ColumnType, "width": "", "ishj": false, "caltype": "count", "istip": true, "isuser": "Y", "order": "", "bindwig": "", options: [], querydata: [], mapdata: [] };
                        widget.dllist.push(wd)

                    } else {
                        app.$notify({
                            title: '警告',
                            message: '已存在该字段',
                            type: 'warning'
                        });
                    }
                },
                datachange: function (chidata) {
                    app.nowwidget.childpro = JSON.parse(chidata);
                },
                datamange: function (data, nowwidget) {
                    const dv = new DataSet.View().source(data);
                    var redata = [];
                    //数据过滤
                    //dv.transform({
                    //    type: 'filter',
                    //    callback(row) { // 判断某一行是否保留，默认返回true
                    //        return row.year > 1998;
                    //    }
                    //});

                    //数据映射
                    //dv.transform({
                    //    type: 'map',
                    //    callback(row) { // 加工数据后返回新的一行，默认返回行数据本身
                    //        row.newCol = row.xxx + row.yyy;
                    //        return row;
                    //    }
                    //});
                    //字段过滤
                    var filds = _.concat(_.map(nowwidget.wdlist, 'colid'), _.map(nowwidget.dllist, 'colid'));
                    if (filds.length > 0) {
                        dv.transform({
                            type: 'pick',
                            fields: filds // 决定保留哪些字段，如果不传，则返回所有字段
                        });
                    }
                    //统计

                    var tjfilds = _.map(nowwidget.dllist, 'colid');
                    if (tjfilds.length > 0) {
                        var operations = _.map(nowwidget.dllist, 'caltype');
                        var groupBy = _.map(nowwidget.wdlist, 'colid');
                        dv.transform({
                            type: 'aggregate', // 别名summary
                            fields: tjfilds,        // 统计字段集
                            operations: operations,    // 统计操作集
                            as: tjfilds,            // 存储字段集
                            groupBy: groupBy        // 分组字段集
                        })
                    }
                    //排序
                    // wigget.dataorder = { prop: '', order: '' };
                    if (nowwidget.dataorder.prop) {
                        dv.transform({
                            type: 'sort-by',
                            fields: [nowwidget.dataorder.prop], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
                            order: nowwidget.dataorder.order        // 默认为 ASC，DESC 则为逆序
                        })
                    }
                    redata = dv.rows;
                    //取子集
                    if (nowwidget.datacount != '0') {
                        redata = _.slice(redata, 0, nowwidget.datacount)

                    }
                    return redata;
                },

                GetYBData: function () {
                    for (var i = 0; i < app.FormData.wigetitems.length; i++) {
                        var nowwidget = app.FormData.wigetitems[i];
                        if (nowwidget.wigdetype == "dwig") {
                            nowwidget.apiurl = app.jxsql(nowwidget.apiurl, true);
                            app.UpdateYBData(nowwidget)
                        }
                    }
                },
                UpdateYBData: function (nowwidget) {
                    if (nowwidget.datatype == '2') {//静态数据
                        try {
                            var js = JSON.parse(nowwidget.staticdata);
                            var lastdata = app.datamange(js, nowwidget);
                            nowwidget.dataset = lastdata;
                        } catch (e) {
                            app.$notify({
                                title: '失败',
                                message: '错误得JSON格式',
                                type: 'error'
                            });
                        }
                        return;
                    }

                    //找到查询组件
                    var tempqufied = _.filter(app.FormData.wigetitems, function (o) { return o.wigdetype == 'qwig' });
                    var qfileds = [];
                    _.forEach(tempqufied, function (obj) {
                        qfileds.push({ component: obj.component, datasetname: obj.datasetname, title: obj.title, value: obj.value, wigdetcode: obj.wigdetcode })
                    })

                    //需要先克隆一个对象
                    var tempnow = _.clone(nowwidget);
                    tempnow.apiurl = app.jxsql(tempnow.apiurl, true);
                    var pageNo = 1;
                    var pageSize = 0;
                    if (nowwidget.component == "qjTable") {
                        pageNo = nowwidget.childpro.nowpage;
                        pageSize = nowwidget.childpro.pagesize;
                    }
                    $.getJSON('/api/Bll/ExeAction?Action=DATABI_GETYBDATA', { P1: JSON.stringify(tempnow), querydata: JSON.stringify(qfileds), pagecount: nowwidget.datacount, pageNo: pageNo, pageSize: pageSize }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            nowwidget.dataset = [];
                            if (nowwidget.datatype == "0") {
                                nowwidget.datatotal = resultData.DataLength;
                                nowwidget.dataset = resultData.Result;
                            } else {
                                if (resultData.Result) {
                                    try {
                                        app.jxfiled(nowwidget, resultData.Result)
                                        var tempdata = JSON.parse(resultData.Result);
                                        var lastdata = app.datamange(tempdata, nowwidget);
                                        nowwidget.dataset = lastdata;
                                    } catch (e) {
                                        app.$notify({
                                            title: '失败',
                                            message: '获取数据格式错误',
                                            type: 'error'
                                        });
                                    }
                                }
                            }
                        }
                    })

                }

            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    pro.inityb();
                    if (!ComFunJS.isPC()) {
                        pro.vtype = "1";
                        $("body").addClass("mob")
                    }


                })

            }
        })


    </script>
</body>

</html>